<script setup lang="ts">
import TreeNode from "@/components/tree/TreeNode.vue";
import type TreeNodeProp from "@/components/tree/TreeNodeProp.ts";
import {computed, onUnmounted, ref} from "vue";

const emit = defineEmits<{
  (e: 'checked', node: string, checked: boolean): void
}>()
const props = defineProps<{
  data: TreeNodeProp[],
  checkedKeys?: string[],
  checkStrategy?: (node: TreeNodeProp) => boolean
  check?: boolean,
  allCheck?: boolean,
  cancelCheck?: boolean,
  recursiveCheck?: boolean,
  defaultExpanded?: boolean
  loadChildren?: (node: TreeNodeProp) => Promise<TreeNodeProp[]>
}>();

//自动兜底：如果未传，则用内部的 ref([])
const innerCheckedKeys = ref<string[]>([])
const checkedKeys = computed(() => props.checkedKeys ?? innerCheckedKeys.value)

onUnmounted(() => {
  innerCheckedKeys.value = []
})
</script>

<template>
  <div class="tree">
    <TreeNode v-for="node in data"
              :node="node"
              :key="node.id"
              :checkedKeys="checkedKeys"
              :check="check"
              :checkStrategy = "checkStrategy"
              :allCheck="allCheck"
              :cancelCheck="cancelCheck"
              :recursiveCheck="recursiveCheck"
              :loadChildren="loadChildren"
              :defaultExpanded="defaultExpanded"
              @checked="(id, checkStatus) => emit('checked', id, checkStatus)"/>
  </div>
</template>

<style scoped>
.tree {
  width: 100%;
}
</style>